<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img class="banner-img" :src="bannerImg" alt="">
            <div class="banner-info">
                <div class="banner-tit">
                    {{this.sightName}}
                </div>
                <div class="banner-number">
                    <span class="iconfont banner-icon">&#xe6dd;</span>
                    {{this.bannerImgs.length}}
                </div>
            </div>
        </div>
        <!--动画效果组件-->
        <fade-animation>
            <!--gallary 会以插槽的形式传入 fade中的slot就是传入的gallary-->
            <gallary
                    :imgs="bannerImgs"
                    v-if="showGallary"
                    @close="handleGallaryClose"
            ></gallary>
        </fade-animation>
    </div>
</template>

<script>
    import gallary from 'common/gallary/gallary'
    import FadeAnimation from 'common/fade/FadeAnimation'
    export default {
        name: "banner",
        props:{
            sightName:String,
            bannerImg:String,
            bannerImgs:Array,
        },
        data () {
            return {
                showGallary:false,
            }
        },
        components:{
            gallary,
            FadeAnimation
        },
        methods:{
            handleBannerClick () {
                this.showGallary=true;
            },
            handleGallaryClose () {
                this.showGallary=false;
            }
        }
    }
</script>

<style lang="stylus" scoped>
/*为了防止img抖动*/
.banner
    overflow: hidden;
    height: 0
    padding-bottom:41%
    position relative
.banner-img
    width:100%
.banner-info
    position: absolute
    left:0
    right:0
    bottom:0
    line-height:.6rem
    display: flex
    color: #ffffff
    align-items center
    background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
.banner-tit
    flex:1
    font-size :.32rem
    padding:0 .2rem
.banner-number
    padding:0.03rem .4rem
    line-height 0.32rem
    height:.32rem
    -webkit-border-radius: .2rem
    -moz-border-radius: .2rem
    border-radius: .2rem
    background rgba(0,0,0,0.8)
    font-size:.24rem
.banner-icon
    font-size:.24rem
    margin-right 0.08rem
</style>